<template>
  <div class="manager-detail__tongji">
    <div class="jydw-title">应急物资统计</div>
    <ul class="tj-box">
      <li v-for="(item, index) in totalData" :key="index">
        <!-- <img src="../../../../assets/tongji/dwlx.png" /> -->
        <img :src="require(`../../../../assets/tongji/${item.icon}.png`)" />
        <span class="name">{{ item.name }}</span>
        <div class="num">
          <span>{{ item.num }}</span>
          <em>{{ item.dw }}</em>
        </div>
        <div class="ws" v-if="index==0">
            已完善 <font color="#4AF6FC">{{ item.doneCount || 0 }}</font> |
            未完善
            <font color="#FF6A6B">{{ item.unDoneCount || 0 }}</font>
          </div>
      </li>
    </ul>
    <tx-block>
      <div>
        <el-form label-width="110px" class="demo-ruleForm" :inline="true">
          <el-form-item label="物资库名称">
            <el-input
              v-model="table.query.orgName"
              placeholder="请输入物资库名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源完善情况">
            <el-select
              v-model="table.query.status"
              placeholder="请选择资源完善情况"
            >
              <el-option
                v-for="item in statusObj"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <tx-list-table
        :table="table"
        ref="listTable"
        row-key="name"
        v-loading="table.loading"
        :table-row-style="tableRowStyle"
      >
        <tx-table-column-text label="序号" width="46">
          <template slot-scope="scope">
            <span class="number-index">{{
            scope.scope.scope.$index + 1
           }}</span>
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="" width="70">
          <template slot-scope="scope">
            <img :src="require(`../../../../assets/tongji/dws.png`)" v-if="tableRowStyle({row: scope.row})"/>
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="物资库名称">
          <template slot-scope="scope">
            {{ scope.row.org_name }}
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="地址" prop="address">
        </tx-table-column-text>
        <tx-table-column-text label="管理员名称">
          <template slot-scope="scope">{{ scope.row.name }} </template>
        </tx-table-column-text>
        <tx-table-column-text label="管理员电话">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </tx-table-column-text>
        <tx-table-column-text label="防火类" prop="protect_num" width="120">
        </tx-table-column-text>
        <tx-table-column-text label="防汛类" width="120" prop="flood_num">
        </tx-table-column-text>
        <tx-table-column-text
          label="抗震救灾类"
          width="120"
          prop="shockproof_num"
        >
        </tx-table-column-text>
        <tx-table-column-text
          label="救灾物资类"
          width="120"
          prop="disaster_num"
        >
        </tx-table-column-text>
        <tx-table-column-text label="其它类" width="120" prop="other_num">
        </tx-table-column-text>
        <tx-table-column-action width="150" align="left">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="table-edit-btn"
              @click="handlDetail(scope)"
              >详情
            </el-button>
          </template>
        </tx-table-column-action>
      </tx-list-table>
    </tx-block>
  </div>
</template>

<script>
import { getList } from "@/api/systemManage/dictionary";

// import DetailEvent from "./DetailEvent.js";
// import PartsModifyMixin from "./mixins/PartsModifyMixin.js";
// import dbl from "@/utils/dbl";

export default {
  mixins: [],
  props: {
    userInfo: {
      type: Object,
      default() {
        return {
          phone: "",
        };
      },
    },
  },
  data() {
    return {
      totalData: [
        {
          icon: "dwlx",
          name: "仓库数量",
          key: "store_num",
          num: "0",
          dw: "个",
          unDoneCount:"0",
          doneCount:"0"
        },
        {
          icon: "dwsl",
          name: "防火类",
          key: "protect_num",
          num: "0",
          dw: "件",
        },
        {
          icon: "dwrs",
          name: "防汛类",
          key: "flood_num",
          num: "0",
          dw: "件",
        },
        {
          icon: "zbsl",
          name: "抗震救灾类",
          key: "shockproof_num",
          num: "0",
          dw: "件",
        },
        {
          icon: "zbsl",
          name: "救灾物资类",
          key: "disaster_num",
          num: "0",
          dw: "件",
        },
        {
          icon: "zbsl",
          name: "其它类",
          key: "other_num",
          num: "0",
          dw: "件",
        },
      ],
      tableData: [],
      table: {
        loading: false,
        query: {
          orgName: "",
          orgType1: "",
          orgType2: "",
          status: 0,
        },
        sort: {
          descs: ["updateTime"],
        },
        page: this.$yzvue.initPage(),
      },
      statusObj: [
        // 完善状态
        {
          label: "全部",
          value: 0,
        },
        {
          label: "已完善",
          value: 1,
        },
        {
          label: "待完善",
          value: 2,
        },
      ],
      typelist1: [], // 一级救援队伍类型
      typelist2: [], // 二级救援队伍类型
    };
  },
  components: {},
  created() {},
  mounted() {
    !this.userInfo.phone && this.loadTable();
  },
  watch: {
    "table.query.orgType1": function () {
      // 监听一级菜单触发二级菜单查询
      this.typelist2 = [];
      this.table.query.orgType2 = "";
      this.getOrgType(this.table.query.orgType1, "typelist2");
    },
    "userInfo.phone": {
      handler(val) {
        this.userInfo.phone = val;
        this.loadTable();
      },
    },
  },
  methods: {
    reset() {
      this.table.query = {
        orgName: "",
        orgType1: "",
        orgType2: "",
        status: 0,
      };
      this.typelist2 = [];
      this.handleQuery();
    },
    handleQuery() {
      this.loadTable();
    },
    loadTable() {
      this.table.loading = true;
      // const { data } = await getList({ ...param, });
      let data = {
        body: {
          name: this.table.query.orgName,
          // type: this.table.query.orgType2 || this.table.query.orgType1,
          // depId: this.userInfo.phone,
          status: this.table.query.status,
          menuID: this.getParameter("menuId"),
          areaCode: this.$userInfo.areaCode,
          createdBy: this.userInfo.phone,
        },
      };
      this.$api.StatisticsController.getstoreStatistics(data, (res) => {
        this.table.loading = false;
        if (res.code == 0) {
          // 统计数据重置
          this.totalData.map((item, index) => {
            this.totalData[index]["num"] = res?.data[item["key"]] || "0";
          });
          this.totalData[0]["unDoneCount"] = res.data.unDoneCount;
          this.totalData[0]["doneCount"] = res.data.doneCount;
          this.$yzvue.assembleBody(this.table.page, {
            records: res?.data.list,
          });
        }
      });
    },
    getOrgType(parId, typelist) {
      if (!parId) {
        return false;
      }
      // 获取类型列表
      let data = {
        body: {
          parId,
        },
      };
      this.$api.OrgController.type(data, (res) => {
        if (res.code == 0) {
          this[typelist] = res?.data;
        }
      });
    },
    changeOrgType(val) {
      this.table.query.orgType1 = val;
    },
    handlDetail(scope) {
      let row = scope.row;
      this.$router.push(`/addMaterialWarehouse?depId=${row.dep_id}`);
    },

    tableRowStyle({ row, rowIndex }) {
      if (row?.state == 2) {
        return {
          background: "rgba(254,179,76,0.1)",
          "box-shadow": "inset 0px 0px 10px 0px #FEB34C",
          color: "#FEB34C",
        };
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/variables.scss";

.manager-detail__tongji .tx-detail {
  padding: 0px 0px;
  justify-content: left;
  .tx-list-query,
  .tx-list-table {
    padding: 15px 25px;
  }
  .detail__buttons {
    position: absolute;
    top: 15px;
    right: 40px;
  }
}
.manager-detail__tongji {
  border: 1px solid rgba(61, 126, 165, 0.5);
  background: linear-gradient(0deg, #0b3e66 0%, #1c5280 100%);
  .el-form-item__content .el-select {
    width: auto !important;
  }
}
.jydw-title {
  font-size: 18px;
  background: url(../../../../assets/tongji/title.png) left no-repeat;
  background-size: 24px 24px;
  text-indent: 25px;
  color: #4af6fc;
  margin-left: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0px 0;
}
.tj-box {
  display: flex;
  padding: 0 15px 10px;
  li {
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    align-content: center;
    align-items: center;
    flex: 1;
    display: flex;
    background: linear-gradient(0deg, #4486d7 0%, #2a5982 100%);
    border: 1px solid #2b5c7c;
    margin: 0 5px;
    box-shadow: inset 0px 0px 5px 0px #a3d6da;
    img {
      width: 60px;
      height: 60px;
    }
    .name {
      width: 80px;
      margin-left: 10px;
      margin-top: -18px;
    }
    .num {
      flex: 1;
      text-align: right;
      font-family: "PingFangSC-Semibold, PingFang SC;";
      font-weight: bold;
      color: #00cfff;
      line-height: 32px;
      margin-top: -18px;
      // background: linear-gradient(180deg, #cdfff9 0%, #4bffeb 100%);
      //   -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      span {
        font-size: 20px;
      }
      em {
        font-size: 16px;
        margin-left: 2px;
      }
    }
    .ws {
      position: absolute;
      display: block;
      margin-left: 70px;
      margin-top: 40px;
      color: #bdd5e6;
    }
  }
}
</style>
